<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ include file="/commons/taglibs.jsp" %>
<script type="text/javascript" src="${ctx }/assets/js/pinyin_dict_notone.js"></script>
<script type="text/javascript" src="${ctx }/assets/js/pinyinUtil.js"></script>
<link rel="stylesheet" href="${ctx}/assets/bootstrap-input/css/fileinput.min.css" />
<script src="${ctx}/assets/bootstrap-input/js/fileinput.min.js"></script>
<script src="${ctx}/assets/bootstrap-input/js/locales/zh.js"></script>
<script>
jQuery(function($) {
	formvalidation("#addForm",{
		roleCode:{
			remote:{
				url:"${ctx}/acctRole/json/checkCode",
				data:{
					id:$("#id").val()
				}
			}
		}
	},{
		roleCode:{
			remote:"<fmt:message key='AcctRole.error.codeExist'/>"
		}
	})
	$("#saveBtn").click(function(){
		$("#addForm").submit();
	})
	var btnCust = '<button type="button" class="btn btn-default" title="Add picture tags" ' + 
    'onclick="alert(\'Call your custom code here.\')">' +
    '<i class="glyphicon glyphicon-tag"></i>' +
    '</button>'; 
	$('#file').fileinput({
		overwriteInitial: true,
		showUpload:false,
		showClose:false,
		showCaption: false,
		showRemove: false,
		showCaption:false,
		showBrowse: false,
		removeLabel: '',
		removeIcon: '<i class="glyphicon glyphicon-remove"></i>',
		browseOnZoneClick: true,
        allowedFileExtensions : ['jpg', 'png','gif'],
        defaultPreviewContent: '<img src="${acctUser.logo}" alt="Your Avatar" style="width:160px"><h6 class="text-muted">Click to select</h6>',
 	});
	
})
</script>
<custom:message/>
	<fmt:message key="label.pleaseInput" var="pleaseInput"></fmt:message>
	<fmt:message key="AcctUser.gender.title" var="genderTitle"/>
	<fmt:message key="AcctUser.homePhone.title" var="homePhoneTitle"/>
	<fmt:message key="AcctUser.lastLoginDate.title" var="lastLoginDateTitle"/>
	<fmt:message key="AcctUser.loginName.title" var="loginNameTitle"/>
	<fmt:message key="AcctUser.logo.title" var="logoTitle"/>
	<fmt:message key="AcctUser.mobilePhone.title" var="mobilePhoneTitle"/>
	<fmt:message key="AcctUser.password.title" var="passwordTitle"/>
	<fmt:message key="AcctUser.systemId.title" var="systemIdTitle"/>
	<fmt:message key="AcctUser.userName.title" var="userNameTitle"/>
	<fmt:message key="AcctUser.workPhone.title" var="workPhoneTitle"/>
	<form:form action="${ctx }/acctUser/saveProfile" id="addForm" name="addForm" modelAttribute="acctUser" method="post" enctype="multipart/form-data">
		<form:hidden path="id"/>
		<div class="row">
		<div class="col-xs-12 col-sm-3 center">
			<span class="profile-picture">
				<input type="file" id="file" name="file">
				<form:hidden path="logo"/>
			</span>
		</div>
		<div class="col-xs-12 col-sm-9">
		<div class="form-group">
			<label class="control-label col-md-2"> <span class="required">*</span>
			${loginNameTitle}
			</label>
			<div class="col-md-4">
				<c:out value="${acctUser.loginName }"></c:out>
				<form:hidden path="loginName"/>
			</div>
		</div>
		<div class="form-group">
			<label class="control-label col-md-2"> <span class="required">*</span>
			${userNameTitle}
			</label>
			<div class="col-md-4">
				<form:input path="userName" cssClass="form-control"  placeHolder='${pleaseInput} ${userNameTitle}' maxlength='250' required='true'/>
			</div>
		</div>
		<div class="form-group">
			<label class="control-label col-md-2"> <span class="required">*</span>
			${genderTitle}
			</label>
			<div class="col-md-4">
				<form:select path="gender" cssClass="form-control">
					<form:options items="${genderMap}"/>
				</form:select>
			</div>
		</div>
		<div class="form-group">
			<label class="control-label col-md-2"> 
			${homePhoneTitle}
			</label>
			<div class="col-md-4">
				<form:input path="homePhone" cssClass="form-control"  placeHolder='${pleaseInput} ${homePhoneTitle}' maxlength='45'/>
			</div>
		</div>
		
		
		<div class="form-group">
			<label class="control-label col-md-2"> 
			${mobilePhoneTitle}
			</label>
			<div class="col-md-4">
				<form:input path="mobilePhone" cssClass="form-control"  placeHolder='${pleaseInput} ${mobilePhoneTitle}' maxlength='45'/>
			</div>
		</div>
		
		<div class="form-group">
			<label class="control-label col-md-2"> 
			${workPhoneTitle}
			</label>
			<div class="col-md-4">
				<form:input path="workPhone" cssClass="form-control"  placeHolder='${pleaseInput} ${workPhoneTitle}' maxlength='45'/>
			</div>
		</div>
		<div class="form-group">	
				<div class="col-md-8">
					<a id="saveBtn" class="btn btn-primary"><fmt:message key="navigation.button.save"></fmt:message> </a>
					<a id="cancelBtn" class="btn btn-danger"  onclick="top.Dialog.close()"><fmt:message key="navigation.button.cancel"/></a>
					
				</div>
		</div>
		</div>
		</div>
		
	</form:form>

